<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>基于ONVIF的摄像头控制平台</title>
  <!--  <link rel="shortcut icon" href="favicon.ico">-->
  <link rel="stylesheet" type="text/css" href="/css/login.css">
  <link rel="stylesheet" href="/css/bootstrap.min.css">
  <script src="/js/jquery-3.6.1.min.js"></script>
  <script src="/js/bootstrap.min.js"></script>

</head>

<body>
  <div class="header">
    <img src="/img/logo_new2.png" style="height: 36.5px;">
  </div>
  <div class="login-div">
    <div class="logo">
      <svg t="1714400683355" class="icon" viewBox="0 0 1104 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
        p-id="2823" width="80" height="80" style="margin-top:10px; margin-left: 10px;">
        <path
          d="M175.501233 629.551086H89.047976a17.240654 17.240654 0 0 1 0-34.481307h86.453257a17.240654 17.240654 0 0 1 0 34.481307z"
          fill="#6E6E96" p-id="2824"></path>
        <path
          d="M65.355008 898.069956V235.175446c0-47.73937 23.770551-54.014968 52.816742-54.014968h856.968238c29.033261 0 52.829673 6.301459 52.829672 54.014968v662.89451"
          fill="#B9BCC9" p-id="2825"></path>
        <path
          d="M975.135678 180.044146H118.17175c-29.046191 0-52.816742 6.279908-52.816742 54.014967v43.101634c0-47.73937 23.770551-54.014968 52.816742-54.014968h856.968238c29.033261 0 52.829673 6.301459 52.829672 54.014968v-43.101634c-0.00431-47.709199-23.783482-54.014968-52.833982-54.014967z"
          fill="#FFFFFF" opacity=".15" p-id="2826"></path>
        <path
          d="M1038.611454 892.37623h-34.481307V235.162515c0-31.455572-8.887557-36.770004-35.584709-36.770004h-120.387174a17.240654 17.240654 0 0 1 0-34.481307h120.387174c19.162986 0 70.066016 0 70.066016 71.251311v657.213715zM71.962488 909.616884a17.240654 17.240654 0 0 1-17.240653-17.240654V235.162515c0-71.251311 50.91596-71.251311 70.083256-71.251311h111.31428a17.240654 17.240654 0 0 1 0 34.481307H124.800781c-26.710083 0-35.60195 5.314431-35.601949 36.770004v657.213715c0.00431 9.521151-7.715192 17.240654-17.236344 17.240654z"
          fill="#6E6E96" p-id="2827"></path>
        <path
          d="M1048.925675 878.531985h-376.066067v36.196753h-265.462964v-36.196753h-359.984847c-16.60706 0-30.171144 13.568394-30.171143 30.166834v78.427733h1061.834614v-78.427733c0.017241-16.585509-13.559774-30.166834-30.149593-30.166834z"
          fill="#B9BCC9" p-id="2828"></path>
        <path
          d="M1048.925675 865.601495h-376.066067v36.196752h-265.462964v-36.196752h-359.984847c-16.60706 0-30.171144 13.568394-30.171143 30.166834v47.411797c0-16.598439 13.559774-30.166834 30.171143-30.166834h359.984847v36.196753h265.462964v-36.196753h376.066067c16.60706 0 30.166834 13.568394 30.166834 30.166834v-47.411797c0-16.585509-13.577015-30.166834-30.166834-30.166834z"
          fill="#FFFFFF" opacity=".15" p-id="2829"></path>
        <path d="M145.60163 259.855441h797.380229v538.524746h-797.380229z" fill="#8CBDF2" p-id="2830"></path>
        <path d="M402.340823 773.109699L928.560052 280.108899v144.670634l-349.015481 348.330166z" fill="#DEEFFF"
          opacity=".31" p-id="2831"></path>
        <path d="M928.560052 424.779533l-349.015481 348.330166h349.015481z" fill="#FFFFFF" opacity=".31" p-id="2832">
        </path>
        <path d="M145.60163 259.855441h782.958422v56.489002H145.60163z" fill="#6E6E96" opacity=".15" p-id="2833"></path>
        <path
          d="M942.981859 815.62084h-797.380229a17.240654 17.240654 0 0 1-17.240654-17.240653V259.855441a17.240654 17.240654 0 0 1 17.240654-17.240653h77.582941a17.240654 17.240654 0 0 1 0 34.481307h-60.342288v504.043438h762.898922V277.096095h-77.582941a17.240654 17.240654 0 0 1 0-34.481307h94.823595a17.240654 17.240654 0 0 1 17.240653 17.240653v538.524746a17.240654 17.240654 0 0 1-17.240653 17.240653z"
          fill="#6E6E96" p-id="2834"></path>
        <path d="M17.240654 949.481585h1061.834614v37.644967H17.240654z" fill="#6E6E96" opacity=".15" p-id="2835">
        </path>
        <path
          d="M1079.079578 1004.367206H17.240654a17.240654 17.240654 0 0 1-17.240654-17.240654v-78.427733c0-26.136831 21.270656-47.407487 47.411797-47.407487h359.984847a17.240654 17.240654 0 0 1 17.240654 17.240653v18.956099h230.981657v-18.956099a17.240654 17.240654 0 0 1 17.240653-17.240653h376.066067c12.633089 0 24.52483 4.939447 33.49428 13.917517a47.041123 47.041123 0 0 1 13.900277 33.5029v78.414803a17.240654 17.240654 0 0 1-17.240654 17.240654z m-1044.598271-34.481307h1027.353307v-61.18708a12.775324 12.775324 0 0 0-3.805874-9.115996 12.822736 12.822736 0 0 0-9.107375-3.810184h-358.825413v18.956099a17.240654 17.240654 0 0 1-17.240654 17.240653h-265.462964a17.240654 17.240654 0 0 1-17.240653-17.240653v-18.956099h-342.744194c-7.12901 0-12.93049 5.80148-12.93049 12.92618v61.18708z"
          fill="#6E6E96" p-id="2836"></path>
        <path
          d="M541.722887 267.070655m-234.865114 0a234.865114 234.865114 0 1 0 469.730228 0 234.865114 234.865114 0 1 0-469.730228 0Z"
          fill="#F0F0FF" p-id="2837"></path>
        <path
          d="M346.019918 267.768901c0-109.590215 88.849708-198.426992 198.431302-198.426992 95.310643 0 174.89781 67.195447 194.013385 156.790814-13.827004-103.241344-102.267247-182.862992-209.301534-182.862993-116.641642 0-211.206627 94.552054-211.206627 211.198007 0 116.658883 94.560675 211.210937 211.206627 211.210937 0.461187 0 0.918065-0.01293 1.366321-0.012931-103.081868-7.154871-184.509475-92.996085-184.509474-197.896842z"
          fill="#F7F7FF" p-id="2838"></path>
        <path
          d="M541.02464 29.330662c-129.714367 0-234.865114 105.150746-234.865113 234.860804s105.150746 234.865114 234.865113 234.865113c129.710057 0 234.852183-105.150746 234.852184-234.865113s-105.146436-234.860804-234.852184-234.860804z m-7.900529 442.88222c-116.193385 0-210.379076-94.198621-210.379076-210.396316 0-116.193385 94.190001-210.387696 210.379076-210.387696 116.206315 0 210.400626 94.198621 210.400626 210.387696 0 116.206315-94.194311 210.396316-210.400626 210.396316z"
          fill="#6E6E96" opacity=".15" p-id="2839"></path>
        <path
          d="M541.722887 519.176422c-139.01139 0-252.105767-113.094377-252.105768-252.105767S402.711497 14.964887 541.722887 14.964887s252.105767 113.094377 252.105767 252.105768-113.094377 252.105767-252.105767 252.105767z m0-469.730227c-119.999259 0-217.62446 97.625201-217.62446 217.62446s97.625201 217.62446 217.62446 217.62446 217.62446-97.625201 217.62446-217.62446-97.625201-217.62446-217.62446-217.62446z"
          fill="#6E6E96" p-id="2840"></path>
        <path
          d="M371.553326 262.626876c0 93.621059 76.164897 169.764406 169.764405 169.764406s169.768716-76.164897 169.768716-169.764406c0-93.616749-76.169208-169.760096-169.768716-169.760095-93.612439 0-169.764406 76.143347-169.764405 169.760095z"
          fill="#ABD2FF" p-id="2841"></path>
        <path
          d="M541.317731 449.631936c-103.112039 0-187.005059-83.88871-187.005059-187.00506s83.88871-187.000749 187.005059-187.000749 187.00937 83.88871 187.00937 187.000749-83.89302 187.005059-187.00937 187.00506z m0-339.524502c-84.099908 0-152.523752 68.419534-152.523752 152.519442s68.423844 152.523752 152.523752 152.523752c84.104218 0 152.528062-68.423844 152.528063-152.523752s-68.423844-152.519442-152.528063-152.519442z"
          fill="#6E6E96" p-id="2842"></path>
        <path
          d="M541.602202 204.9612c31.722803 0 57.437237 25.718745 57.437238 57.432927s-25.714435 57.450168-57.437238 57.450168-57.437237-25.735986-57.437237-57.450168c-0.00431-31.722803 25.710125-57.432927 57.437237-57.432927z"
          fill="#A1A1C7" p-id="2843"></path>
        <path
          d="M541.602202 337.084949c-41.179301 0-74.677891-33.50721-74.677891-74.690822 0-41.174991 33.49859-74.673581 74.677891-74.67358s74.677891 33.49859 74.677891 74.67358c0 41.183611-33.5029 74.690822-74.677891 74.690822z m0-114.883095c-22.16717 0-40.196584 18.029413-40.196584 40.192273 0 22.171481 18.033724 40.209514 40.196584 40.209515s40.196584-18.038034 40.196584-40.209515c0-22.16286-18.033724-40.192274-40.196584-40.192273z"
          fill="#6E6E96" p-id="2844"></path>
        <path
          d="M538.451473 90.2031c-95.21582 0-172.665146 77.445016-172.665146 172.647905 0 95.21582 77.445016 172.665146 172.665146 172.665145 95.189959 0 172.630664-77.470877 172.630664-172.665145 0-95.202889-77.449326-172.647905-172.630664-172.647905z m9.473739 322.943302c-77.626043 0-140.791487-63.169755-140.791487-140.808728 0-77.621733 63.161134-140.787177 140.791487-140.787177s140.782867 63.161134 140.782867 140.787177c0 77.643283-63.152514 140.808728-140.782867 140.808728z"
          fill="#6E6E96" opacity=".15" p-id="2845"></path>
        <path
          d="M586.613239 360.976185c-10.947815-10.947815 6.107502-17.93459 20.938773-32.774483 14.831272-14.831272 21.822357-31.890899 32.774483-20.934463s7.814326 31.865038-7.029877 46.687689c-14.835582 14.831272-35.735565 17.977692-46.683379 7.021257z"
          fill="#FFFFFF" opacity=".6" p-id="2846"></path>
        <path
          d="M528.012257 250.364461m-16.374311 0a16.374311 16.374311 0 1 0 32.748622 0 16.374311 16.374311 0 1 0-32.748622 0Z"
          fill="#FFFFFF" opacity=".6" p-id="2847"></path>
        <path
          d="M570.437195 279.190834c0 5.732517-4.637736 10.370253-10.374563 10.370253a10.378873 10.378873 0 1 1 0-20.757747 10.370253 10.370253 0 0 1 10.374563 10.387494z"
          fill="#FFFFFF" opacity=".31" p-id="2848"></path>
        <path
          d="M461.282307 518.404903c6.07733-8.947899 19.921575-16.249316 30.731465-16.249316h108.853177c10.835751 0 24.645514 7.297107 30.740085 16.249316l7.503995 10.977986c6.085951 8.95652 11.059879 23.257642 11.059879 31.791765 0 8.555674-8.848765 15.533829-19.662965 15.533829h-168.139475c-10.80989 0-19.662965-6.982465-19.662965-15.533829 0-8.534124 4.986859-22.835246 11.0685-31.791765l7.508304-10.977986z"
          fill="#CCCCDE" p-id="2849"></path>
        <path
          d="M630.503632 593.949137h-168.139474c-20.348281 0-36.903619-14.701967-36.903619-32.774483 0-13.650287 7.068668-31.196963 14.046823-41.476702l7.534165-11.021088c9.184958-13.525293 28.528972-23.757621 44.963625-23.757621h108.853177c16.413102 0 35.752805 10.223708 44.989485 23.783482l7.486754 10.952125c8.16776 12.016736 14.072683 29.459967 14.072684 41.524114 0.00431 18.068205-16.551027 32.770172-36.90362 32.770173z m-170.367828-34.843361c0.543081 0.193957 1.293049 0.362054 2.232664 0.362054h168.139475c0.943926 0 1.698204-0.168096 2.241285-0.362054-0.745658-4.956688-3.715361-13.878726-7.89622-20.02933l-7.473823-10.934884c-2.90074-4.258441-11.378831-8.736701-16.507926-8.736701H492.018082c-5.133405 0-13.598566 4.469639-16.469134 8.693599l-7.534165 11.025398c-4.025693 5.909234-7.107459 14.969197-7.878979 19.981918z"
          fill="#6E6E96" p-id="2850"></path>
        <path
          d="M401.599475 605.931391v-22.365438c0-12.309827 14.891615-22.382679 33.089124-22.382678h223.339737c18.20613 0 33.089124 10.072852 33.089124 22.382678v22.365438"
          fill="#CCCCDE" p-id="2851"></path>
        <path d="M516.667907 513.982675v49.739286h-43.317142s-0.633594-39.778498 9.318573-49.739286h33.998569z"
          fill="#FFFFFF" opacity=".56" p-id="2852"></path>
        <path d="M577.613617 502.164207v59.010447h72.561601s-6.654892-59.010447-72.561601-59.010447z" fill="#6E6E96"
          opacity=".15" p-id="2853"></path>
        <path d="M438.66257 565.157245h78.005337v40.774146h-78.005337z" fill="#FFFFFF" opacity=".66" p-id="2854"></path>
        <path d="M696.069838 587.376138l-11.133152 18.555253h-86.608423v-44.756737h63.083551l15.370043 8.150519z"
          fill="#6E6E96" opacity=".15" p-id="2855"></path>
        <path
          d="M691.11746 623.172045H401.599475a17.240654 17.240654 0 0 1-17.240654-17.240654v-22.365438c0-22.218892 22.106828-39.623332 50.329778-39.623332h223.339737c28.22295 0 50.329778 17.40444 50.329778 39.623332v22.365438a17.240654 17.240654 0 0 1-17.240654 17.240654z m-272.277332-34.481308h255.036679v-4.715318c-1.04737-1.736996-6.771267-5.555801-15.848471-5.555801h-223.339737c-9.068584 0-14.796791 3.818805-15.848471 5.555801v4.715318z"
          fill="#6E6E96" p-id="2856"></path>
      </svg>
    </div>
    <div class="title">摄像头控制平台</div>
    <div class="sub-title">账号登录</div>
    <div class="fields">
      <div class="username">
        <svg fill="#777" viewBox="0 0 1024 1024" t="1663768442244" class="icon" version="1.1"
          xmlns="http://www.w3.org/2000/svg" p-id="4411">
          <path
            d="M511.333 63.333c-247.424 0-448 200.576-448 448s200.576 448 448 448 448-200.576 448-448-200.576-448-448-448z m0 832c-51.868 0-102.15-10.144-149.451-30.15-36.011-15.231-69.123-35.67-98.812-60.897 12.177-31.985 42.226-63.875 84.223-88.903C396.189 686.243 456.222 669.53 512 669.53c55.631 0 115.416 16.658 164.026 45.703 41.762 24.953 71.689 56.812 83.863 88.804-29.764 25.342-62.976 45.865-99.106 61.146-47.299 20.006-97.582 30.15-149.45 30.15z m296.268-139.658c-20.493-35.937-54.353-68.855-98.747-95.381C649.75 624.979 579.839 605.53 512 605.53c-67.964 0-138.094 19.488-197.471 54.875-44.644 26.606-78.656 59.594-99.195 95.586-23.835-28.755-43.234-60.652-57.85-95.208-20.006-47.3-30.15-97.583-30.15-149.451s10.144-102.15 30.15-149.451c19.337-45.719 47.034-86.792 82.321-122.078 35.286-35.287 76.359-62.983 122.078-82.321 47.3-20.006 97.583-30.15 149.451-30.15 51.868 0 102.15 10.144 149.451 30.15 45.719 19.337 86.792 47.034 122.078 82.321 35.287 35.286 62.983 76.359 82.321 122.078 20.006 47.3 30.15 97.583 30.15 149.451s-10.144 102.15-30.15 149.451c-14.563 34.429-33.869 66.22-57.583 94.892z"
            fill="" p-id="4412"></path>
          <path
            d="M512 220.223c-88.224 0-160 71.776-160 160s71.776 160 160 160c88.225 0 160-71.775 160-160s-71.775-160-160-160z m0 256c-52.935 0-96-43.065-96-96s43.065-96 96-96 96 43.065 96 96-43.065 96-96 96z"
            fill="" p-id="4413"></path>
        </svg>
        <input type="username" class="user-input" id="username" name="username" placeholder="用户名" />
      </div>
      <div class="nameisempty" id="nameisempty" style="visibility: hidden; color: #d70707;">用户名不能为空</div>
      <div class="password">
        <svg fill="#777" t="1663769738123" class="icon" viewBox="0 0 1024 1024" version="1.1"
          xmlns="http://www.w3.org/2000/svg" p-id="5480">
          <path
            d="M799.999553 384.000994h-23.999963c-4.399993 0-7.999988-3.599994-7.999987-7.999988V258.001189C767.999603 116.701409 652.399782-0.498409 511.000002 0.00159 370.10022 0.501589 256.000397 114.901412 256.000397 256.001192v119.999814c0 4.399993-3.599994 7.999988-7.999987 7.999988h-23.999963c-52.999918 0-95.999851 42.999933-95.999851 95.999851v447.999304c0 52.999918 42.999933 95.999851 95.999851 95.999851h575.999106c52.999918 0 95.999851-42.999933 95.999851-95.999851V480.000845c0-52.999918-42.999933-95.999851-95.999851-95.999851zM569.69991 748.700427c-15.999975 12.099981-25.69996 30.699952-25.69996 50.799922V864.000248c0 17.499973-14.199978 31.799951-31.599951 31.999951-17.799972 0.2-32.39995-14.799977-32.399949-32.699949V800.000348c0-20.199969-9.599985-39.099939-25.79996-51.299921C431.000126 731.200455 416.000149 703.300498 416.000149 672.000547c0-52.199919 42.399934-95.299852 94.599853-95.999851 53.699917-0.799999 97.399849 42.499934 97.399849 95.999851 0 31.299951-14.999977 59.199908-38.299941 76.69988zM703.999702 376.001006c0 4.399993-3.599994 7.999988-7.999988 7.999988H328.000286c-4.399993 0-7.999988-3.599994-7.999988-7.999988V256.001192c0-51.29992 19.999969-99.499846 56.199913-135.799789C412.500154 84.00146 460.70008 64.001491 512 64.001491s99.499846 19.999969 135.799789 56.199912C683.999733 156.501347 703.999702 204.701272 703.999702 256.001192v119.999814z"
            p-id="5481"></path>
          <path d="M512 672.000547m-31.99995 0a31.99995 31.99995 0 1 0 63.9999 0 31.99995 31.99995 0 1 0-63.9999 0Z"
            p-id="5482"></path>
        </svg>
        <input type="password" class="pass-input" id="password" name="password" placeholder="密码" />
      </div>
      <div class="passisempty"id="passisempty" style="visibility: hidden; color: #d70707;">密码不能为空</div>
<!--      <div class="identity">-->
<!--        <div class="id-input"><input type="radio" name="id-input" value="0" checked>用户登录</div>-->
<!--        <div class="id-input"><input type="radio" name="id-input" value="1">管理员登录</div>-->
<!--      </div>-->
    </div>
    <button type="button" class="signin-button" onclick="login();">LOG IN</button>
    <button type="button" class="register-button" onclick="register();">新用户注册</button>
  </div>

  <script type="text/javascript">

    function login() {
      document.getElementById("nameisempty").style.visibility="hidden";
      document.getElementById("passisempty").style.visibility="hidden";
      let username = $("#username").val();
      let password = $("#password").val();
      if (username == ""){
        document.getElementById("nameisempty").style.visibility="visible";
      }else if (password == ""){
        document.getElementById("passisempty").style.visibility="visible";
      }else {
          $.ajax({
            url: "/webapi/login",
            data: {
              username: username,
              userpassword: password
            }
          }).done(function (rs) {
            if (rs >= 0) {
              localStorage.setItem("key", rs);
              window.location.href = "/camerauser";
            } else {
              alert("出错了，您的用户名和密码是乱写的吗？");
            }
          });

      }
    }

    function register() {
      document.getElementById("nameisempty").style.visibility="hidden";
      document.getElementById("passisempty").style.visibility="hidden";
      let username = $("#username").val();
      let password = $("#password").val();
      if (username == ""){
        document.getElementById("nameisempty").style.visibility="visible";
      }else if (password == ""){
        document.getElementById("passisempty").style.visibility="visible";
      }else {
        $.ajax({
            url: "/webapi/register",
            method:"post",
            data: {
              userName: username,
              userPassword: password
            }
          }).done(function (rs) {
          if (rs >= 0) {
            alert("注册成功！");
          } else {
            alert("用户已存在");
          }
        });
      }
    }

  </script>

</body>

</html>